<template>
    <div class="finance">
        <section class="order-main-header">
            <mt-header title="我的资产">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            <mt-button  slot="right" @click="handleNotice()"><img src="../../assets/action/not.png"></mt-button>
            </mt-header>
        </section>
         <div class="load-content">
            <div class="load-main">
                <section class="finance-card otc">
                        <dl>
                                <dt class="flex-between otc-total">
                                    <h2 >总资产</h2>
                                        <img v-if="eyeState"  src="../../assets/my/icon.png" @click="eyeChange()">
                                        <img v-if="!eyeState" src="../../assets/my/eyeClose.png" @click="eyeChange()">
                                </dt>
                                <dd class="profit">
                                <div>
                                        <span v-if="eyeState">{{TotalAssets}}    CNY</span>
                                        <span v-if="!eyeState"><b>*****</b><b>   CNY</b></span>
                                </div>
                                    <div>
                                        <span>昨日收益：</span>
                                        <span :style="{'color':totalNum>=0?'#03ad8f':'rgba(243, 109, 125, 1)'}">{{totalNum}}%<img v-if="totalNum>=0" src="../../assets/action/up.png"><img v-if="totalNum<0" src="../../assets/action/re.png"></span>
                                    </div>
                                </dd>
                                <dd class="otc-ht">
                                    <router-link  to="/finance/payout">
                                    <img src="../../assets/charge.png">
                                        提币
                                    </router-link>
                                    <router-link to="/finance/payin">
                                    <img src="../../assets/draw.png">
                                        充值
                                    </router-link>
                                </dd>
                        </dl>
                        <button><i class="mobile_icon_public"></i></button>
                    </section>
                    <section  class="asset">
                        <div class="trade-order">
                                <div class="nav" style="background: #222240;">
                                    <mt-button style="width:50%" v-bind:class="active=='tab-container1'?'active':''" size="small" @click="changeActive('tab-container1')">币币账户</mt-button>
                                    <mt-button style="width:50%" v-bind:class="active=='tab-container3'?'active':''" size="small" @click="changeActive('tab-container3')">锁仓账户</mt-button>
                                </div>
                                <mt-tab-container  class="page-tabbar-tab-container content" v-model="active"  value="tab-container1">
                                    <mt-tab-container-item id="tab-container1" >
                                        <div class="trade-order--content" id="order-list" growing-ignore="true">
                                            <div >
                                                <div class="order-table"   v-for="(ticker, i) in balancesList" v-bind:key="i">
                                                    <div class="order-header">
                                                        <div class="flex-between ">
                                                            <span  class="order">{{ticker.name}}</span>
                                                            <router-link  class="rotate" :to="{path:'/finance/account',query:{id:ticker.id}}">  <img src="../../assets/my/right.png"></router-link >
                                                        </div>
                                                    </div>
                                                    <div class="order-content flex-between">
                                                        <div class="flex-center">
                                                        <div class="all-amount flex-column">
                                                            <span>可用</span>
                                                            <span>{{ticker.total}}</span>
                                                        </div>
                                                        <div class="all-amount flex-column">
                                                            <span>冻结</span>
                                                            <span>{{ticker.frozen}}</span>
                                                        </div>
                                                        <div class="all-amount flex-column">
                                                            <span>折合(CNY)</span>
                                                            <span>{{(total((ticker.total),(ticker.frozen))*okerRatePrice*symbol.lastDealPrize).toFixed(2)}}</span>
                                                        </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </mt-tab-container-item>
                                    <mt-tab-container-item id="tab-container3" >
                                        <div class="trade-order--content" id="order-list" growing-ignore="true">
                                            <div >
                                                <div class="order-table"   v-for="(ticker, i) in lockList" v-bind:key="i">
                                                    <div class="order-header">
                                                        <div class="flex-between ">
                                                            <p  class="order-sell">{{ticker.fName}}</p>
                                                            <p  class="order-sell font-20">锁仓时间{{timestampToTime(ticker.lockDate)}}</p>
                                                            <p  class="order-sell" v-if="ticker.lockStatus==1">锁仓</p>
                                                                <p  class="order-sell" v-if="ticker.lockStatus==2">锁仓释放</p>
                                                        </div>
                                                    </div>
                                                    <div class="order-content flex-between">
                                                        <div class="flex-center">
                                                        <div class="all-amount flex-column">
                                                            <span class="apply-title">锁仓类型</span>
                                                            <span>{{ticker.lockName}}</span>
                                                        </div>
                                                        <div class="all-amount flex-column">
                                                            <span class="apply-title">数量</span>
                                                            <span>{{ticker.lockNum}}</span>
                                                        </div>
                                                        <div class="all-amount flex-column">
                                                            <span class="apply-title">解锁时间</span>
                                                            <span>{{timestampToTime(ticker.unlockDate)}}</span>
                                                        </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="lockList.length==0" class="data-img">
                                                    <img src="../../assets/noData.png">
                                                    <p>暂无数据</p>
                                                </div>
                                                <router-link  class="total-btn" to="/finance/apply">申请锁仓</router-link>
                                            </div>
                                        </div>
                                    </mt-tab-container-item>
                                </mt-tab-container>
                        </div>
                    </section>
                    <section class="el-toast" v-if="cationModal">
                        <div class="el-modal">
                            <div class="modal-top">
                                <div class="modal-top-error" @click="handleNoticeCancel()"><img src="../../assets/action/error.png"></div>
                                <div class="modal-header">
                                        <span>锁仓活动</span>
                                    </div>
                            </div>
                                <div class="modal-bottom">
                                <div class="modal-bottom-content">
                                        <p >信仰锁仓：</p>
                                        <span>（1）、平台将拿出交易手续费的2%奖励给坚定信仰BZB币的人（如果每月
            交易手续费达到1亿元，就是200万元）。</span>
                                        <span>（2）、奖励的人数恒定为20个名额。</span>
                                    </div>
                                <div class="modal-bottom-content">
                                        <span>（3）、每月抽奖一次，抽奖的方式为随机抽取。</span>
                                        <span>（4）、只需要将1000USDT的币锁仓1个月即可参与抽奖励，到期之后可以继续锁仓等下次抽奖，也可以出售。</span>
                                        <span>（5）为了保证公平公证，平台将会在抽奖时公布参与者名单，将与媒体实
            时公开视频开奖。同时21个节点全程跟踪与监督完成，必要时可以请公证机构
            参与公证。</span>
                                    </div>
                            </div>
                        </div>
                    </section>
            </div>
         </div>
    </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'mint-ui';
export default {
    name:'',
   data(){
         return {
             entrustList:[1,2,3,4],
             TotalAssets:'',
             balancesList:[],
                orderTabs:1, active: "tab-container1",
                rewards:'',
                lockList:[],
                eyeState:'',
                cationModal:false,
                okerRatePrice:'',
                totalNum:''
         }
    },
    mounted() {
        this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
        }),
        this.getBalances();
      this.totalAssets();
      this.promotionRewards();
       if(localStorage.getItem("my.syeState")=='true'){
            this.eyeState=true;
        }else{
            this.eyeState=false;
        }
      
        this.getOtcList();
    },
    methods: {
         getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if(ticker.report){
                            current = ticker
                        }
                    }
                   this.symbol=current;
                     this.myProperty();
             })
          },
             myProperty(){
            let param={userId: this.sessionData.id,
            fViFId:this.symbol.fid}
        this.$http.post('v2/bankerWallet/myProperty',param).then((res)=>{
               this.totalNum=parseFloat(res.data.data.totalNum);
            })
        },
        total(res,req){
            return (parseFloat(res)+parseFloat(req))
        },
        handleNoticeCancel(){
            this.cationModal=false;
        },
        handleNotice(){
            this.cationModal=true;
        },
        applyLock(){
             this.$http.post('/v1/account/promotionRewards').then((res)=>{
                if(res.data.code==200){
                    this.rewards=res.data.data;
                }
             })
        },
           promotionRewards(){
               this.$http.post('/v1/account/promotionRewards').then((res)=>{
                if(res.data.code==200){
                    this.rewards=res.data.data;
                }
             })
        },
           eyeChange(e){
            if(e && e.stopPropagation){
                e.stopPropagation;
            }
            this.eyeState=!this.eyeState;
            localStorage.setItem("my.syeState",this.eyeState);
        },
        getLockAllType(){
            this.$http.post('v2/lock/getAllType',{fViFId:this.rewards.inviteId}).then((res)=>{
          
        })
        },
        getLockList(){
            this.$http.post('v2/lock/list',{userId:this.sessionData.id}).then((res)=>{
            if(res.data.code==0){
                this.lockList=res.data.data;
            }
            })
        },
        changeActive(id){
                this.active = id
                if(this.active=="tab-container1"){
                   this.getBalance();
                }else    if(this.active=="tab-container3"){
                   this.getLockList();
                   // this.getLockAllType();
                }
                       
            },
            getBalances(){
            this.$http.post('v1/account/balances').then((res)=>{
                    this.balancesList=res.data.data;
            })
            },
            totalAssets(){
            this.$http.post('v1/account/TotalAssets').then((res)=>{
                if(res.data.code==200){
                    this.TotalAssets=parseFloat(res.data.data.total).toFixed(2);
                }
                })
            },
                  timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = (date.getMinutes()< 10 ?'0'+date.getMinutes():date.getMinutes())+ ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
        console.log(timestampToTime (1533293827000))
    },
        　　handleClose(){
                this.$router.go(-1);
            },
    }
}
</script>
<style lang="less" scoped>
.profit{
        font-size: 30px;
        display: flex;
        justify-content: space-between;
        margin: 20px;
        height: 60px;
}
.asset{
    margin-top: 60px;
    .trade-order--content{
        margin-bottom: 120px;
    }
}
.font-20{
    font-size: 20px;
}
.apply-title{
    color:rgba(134, 134, 192, 1);
}
.otc-ht{
display: flex;
justify-content: space-between;
color: #000000;
background:rgba(224,224,249,1);
border-radius:0px 0px 20px 20px;
height: 80px;
line-height: 80px;
padding-right: 20px;
a{
    color: #000000;
    width: 50%;
    text-align: center
}
 :nth-child(2){
    border-left: 1px solid rgba(46, 46, 89, 1)
}
}

.finance .otc {
        height: 264px;
    margin: 0 40px;
    border-radius: 20px 20px 0 0;
    background: #2E2E59;
    position: relative;
    color: #E0E0F9;
}
.finance {
    .finance-card dl {
    color: #fff;
}
.finance-card dl dt {
    font-size: 32px;
    line-height: 60px;
    padding-top: 20px;
    height: 60px;
    padding-left: 30px;
    padding-right: 30px;
}
.finance-card dl dd {
    margin-top: 30px;
    font-weight: 400;
     padding-left: 10px;
    padding-left: 10px;
}
}
.nav{
    display: flex;
       border-bottom:1px solid #161736;
}
.page-finance main section.finance-card {
    height: 264px;
    margin: 0 30px;
    border-radius: 20px 20px 0 0;
    background: #1882d4;
    position: relative;
}
.asset .trade-order{
    height: 100%;
}
.order-table{
    padding: 10px 0px 30px 0px;
    position: relative;
    background: #222240;
    margin: 0px 0px 20px 0px;
}
.finance {
    background: rgba(22, 23, 54, 1)
}
.order-header{
    height: 50px;
    line-height: 50px;
    border-bottom:1px solid #161736;
    color: #ADADD8;
    .flex-between{
        padding-left: 30px;
        padding-right: 30px;
    }
}
.order-header>div{
    align-items: center;
}
.order-content .all-amount:nth-child(1){
    width: 33%;
}
.order-content .all-amount:nth-child(2){
    width: 33%;
    text-align: center;
}
.order-content .flex-column{
    flex-direction: column;
        display: flex;
}
.order-content .all-amount:nth-child(3){
    width: 33%;
    text-align: center;
}
.flex-center{
    display: flex;
   align-self: center;
}
.trade-order .flex-center{
width: 100%;
height: 90px;
    line-height: 50px;
}
.otc-total img {
    width: 42px;
    height: 30px;
    margin-top: 5px;
}
 .flex-between{
      display: flex;
        justify-content: space-between;
    }
.order-content{
    padding-top: 20px;
    color: #ADADD8;
    font-size: 24px;
     .flex-center{
        padding-left: 30px;
        padding-right: 30px;
    }
}
.order-select{
    margin-top: 30px;
}
::-webkit-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

.input-box .input-title {
    height: 44px;
    font-size: 24px;
    line-height: 24px
}

.input-box .input-content {
    height: 124px;
    line-height: 72px;
    color: #1f3f59;
    font-size: 32px;
    font-weight: 700;
    position: relative
}


.bg-buy,.bg-up,.page-trade .trade-panel--content .trade-form.buy .submit {
    background: #03ad8f
}

.bg-down,.bg-sell,.page-trade .trade-panel--content .trade-form.sell .submit {
    background: #d14b64
}

.mini-toastr {
    position: fixed;
    z-index: 9;
    left: calc(50% - 250px);
    top: calc(50% - 44px)
}

.mini-toastr__notification {
    cursor: pointer;
    box-sizing: border-box;
    padding: 20px 28px;
    background-color: rgba(31,63,89,.9);
    color: #fff;
    min-width: 500px;
    max-width: 500px;
    text-align: center
}

.mini-toastr-notification__message {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    font-size: 32px;
    line-height: 48px
}

.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 1;
    text-align: center;
    background: #fff;
    z-index: 99
}

.page-loading img {
    top: 50%;
    width: 64px
}

.page-loading img,.page-loading p {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

.page-loading p {
    top: 60%;
    line-height: 1.3;
    opacity: 0;
    transition: opacity .5s ease-in
}
.order-main .sell span{
width: 50%;
height: 90%;
line-height: 100px;
}
.tab-content{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    font-weight:500;
}
 .finance .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border-bottom:1px solid #161736
}
 .finance .active{
color: #3381FF;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
.data-img{
        min-height: 720px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #E0E0F9
}
.data-img img{
     width: 120px;
    height: 120px;
}
 .total-btn {
               display: block;
    width: 90%;
    line-height: 58px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 0;
    border-radius: 10px;
    height: 86px;
    font-size: 32px;
    line-height: 86px;
    color: #FFFFFF;
    background: #5298f1;
    z-index: 10001;
    position: fixed;
    bottom: 30px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    }
    .rotate img{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
width:23px;
height:23px;
}

.el-toast {
    .el-modal{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-direction: column;
        margin-top: -25%
    }
    .modal-top{
        width:638px;
    height:100px;
    line-height: 50px;
    background:rgba(34,34,64,1);
    border-radius:4px 4px 0px 0px;
    color: #fff;
    display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .modal-header {
            font-size:36px;
            height: 60px;
            position: relative;
            top:-20px;
        }
        .modal-header-content{
            text-align: left;
            line-height: 40px;
            padding-left: 30px;
        }
    }
    .modal-bottom{
         .modal-bottom-content{
             span{
                 line-height: 43px;
             }
              padding-left: 30px;
              text-align: left;
              p{
                  height: 70px;
                  line-height: 60px;
                   font-size:28px;
                 color: rgba(82, 152, 241, 1);
              }
             span :nth-child(1){
                 line-height: 60px;
                height: 60px;
             }
         }
        width:638px;
    height:600px;
    color: #fff;
    background:rgba(34,34,64,1);
    border-radius:4px 4px 0px 0px;
    }
    .flex-between{
      display: flex;
        justify-content:start
    }
    height: 100%;
    margin-top: 100px;
    position: fixed;
    background: rgba(22, 23, 54, 1);
    width: 100%;
    text-align: center;
    bottom: 0;
    top: 0%;
    z-index: 10000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.toast-modal{
    background: #161736;
}
.modal-top-error{
    position: relative;
    left: 280px;
    float: right;
    top: -0px
}
.load-content{
           position: absolute;
           top:130px;
           bottom: 0px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch;
           width: 100%;
       }
       .load-main{
           height: 100%;
       }
</style>